<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<section class="content-header">
    <h1>
        商务科组信息维护
    </h1>
</section>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-body">
                    <div class="fixed-table-toolbar">
                        <button type="button" class="btn btn-info pull-right" id="btn-add" style="margin: 5px;" onclick="addInfo()">
                            <!--<i class="fa fa-search"></i>-->
                            <span class="Bold">添加</span>
                        </button>
                    </div>
                    <table id="bootstrap-table" style="table-layout: fixed;word-break:break-all; word-wrap:break-word;"></table>
                </div>
            </div>
        </div>
    </div>
</section>
<!--添加模态框-->
<div class="modal fade" id="modal-edit-project">
    <div class="modal-dialog" style="width:800px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">添加商务科组的信息</h4>
            </div>
            <div class="modal-body" style="padding: 0px;">
                <form id="typeForm-edit" class="form-horizontal">
                    <div class="form-group" style=" margin-top: 10px;">
                        <label class="col-sm-3 control-label">项目组的名称</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" name="groupName" autocomplete="off" placeholder="组的名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">所属类型</label>
                        <div class="col-sm-7">
                            <select name="gtype" class="form-control">
                                <option value="1" selected="selected">合同组</option>
                                <option value="2">成本组</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">部门</label>
                        <div class="col-sm-7">
                            <select name="deptName" class="form-control">
                                <option value="" selected>请选择</option>
                                <option th:each="dept : ${depts}" th:value="${dept.deptId}"
                                        th:text="${dept.deptName}"></option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">显示顺序</label>
                        <div class="col-sm-7">
                            <input type="number" step="1" class="form-control" name="orderId" autocomplete="off" placeholder="显示顺序">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">说明</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" name="remark" autocomplete="off" placeholder="说明">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" id="btn-create-type">提交</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!--编辑模态框-->
<div class="modal fade" id="modal-edit-group">
    <div class="modal-dialog" style="width:800px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">编辑商务科组的信息</h4>
            </div>
            <div class="modal-body" style="padding: 0px;">
                <form id="typeForm-edit2" class="form-horizontal">
                    <input type="hidden" class="form-control" name="id">
                    <div class="form-group" style=" margin-top: 10px;">
                        <label class="col-sm-3 control-label">项目组的名称</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" name="groupName" autocomplete="off" placeholder="组的名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">所属类型</label>
                        <div class="col-sm-7">
                            <select name="gtype" class="form-control">
                                <option value="1" selected="selected">合同组</option>
                                <option value="2">成本组</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">部门</label>
                        <div class="col-sm-7">
                            <select name="deptId" class="form-control">
                                <option value="" selected>请选择</option>
                                <!--${dept.deptId}-->
                                <option th:each="dept : ${depts}" th:value="${dept.deptId}"
                                        th:text="${dept.deptName}"></option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">显示顺序</label>
                        <div class="col-sm-7">
                            <input type="number" step="1" class="form-control" name="orderId" autocomplete="off" placeholder="显示顺序">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">说明</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" name="remark" autocomplete="off" placeholder="说明">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" id="btn-edit-type">提交</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div th:include="include :: footer">
</div>
<script th:inline="javascript">
    /** 加载用户表格 */
    table = js.table.init({
        url: ctx + "businessGroup/groupAllList",
        showColumns: false,
        showExport: false,
        pageSize:5,
        columns: [
            {
                title: '序号', field: 'id', width: '50',
                formatter: function (value, row, index, field) {
                    var pageSize = table.bootstrapTable('getOptions').pageSize;
                    var pageNumber = table.bootstrapTable('getOptions').pageNumber;
                    return pageSize * (pageNumber - 1) + index + 1;
                }
            },
            { title: "项目组名称", field: 'groupName'},
            { title: "部门", field: 'deptName'},
            { title: "所属", field: 'gtype',
                formatter: function(value, row, index){
                    if(value==1){
                        return '合同组';
                    }else if(value==2){
                        return '成本组';
                    }else{
                        return '';
                    }
                }
            },
            { title: "显示顺序", field: 'orderId'},
            { title: "备注", field: 'remark'},
            {
                title: "操作",
                width: '110',
                formatter: function (value, row, index) {
                    var actions = [];
                        actions.push('<a class="btn btn-warning btn-xs" href="javascript:void(0)" onclick="editGroup(' + js.jsonStringify(row) + ')"> 编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="delGroup(' + row.id + ')"> 删除</a> ');

                    return actions.join('');
                }
            }
        ]
    });

    $("#btn-edit-type").click(function(){
        js.post({
            url: ctx + "businessGroup/upd",
            data: $("#typeForm-edit2").serialize(),
            success: function (result) {
                if (result.type === web_status.SUCCESS) {
                    js.modal.success(result.msg);
                    js.table.refresh(table);
                    js.modal.hide("modal-edit-group");
                } else {
                    js.modal.warning(result.msg);
                }
                js.modal.closeLoading();
            }
        });
    });

    /**
     * 执行添加
     */
    function addInfo() {
        js.modal.open("modal-edit-project");
    }
    /** 添加商务组信息 */
    $("#btn-create-type").click(function () {
        js.submit({
            url: ctx + "businessGroup/insert",
            data:new FormData($("#typeForm-edit")[0]),
            success: function (result) {
                if (result.type === web_status.SUCCESS) {
                    js.modal.success(result.msg);
                    js.table.refresh(table);
                    js.modal.hide("modal-edit-project");
                } else {
                    js.modal.warning(result.msg);
                }
                js.modal.closeLoading();
            }
        });
    });


    /** 添加商务组信息 */
    $("#btn-edit-type").click(function () {
        js.post({
            url: ctx + "businessGroup/upd",
            data: $("#typeForm-edit2").serialize(),
            success: function (result) {
                if (result.type === web_status.SUCCESS) {
                    js.modal.success(result.msg);
                    js.table.refresh(table);
                    js.modal.hide("typeForm-edit2");
                } else {
                    js.modal.warning(result.msg);
                }
                js.modal.closeLoading();
            }
        });
    });
    /**
     * 执行删除
     */
    function delGroup(idd){
        js.modal.confirm("确认删除吗？", function (result) {
            if (result) {
                callBack();
            }
            js.post({
                url: ctx + "businessGroup/del",
                data: {id: idd},
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        js.modal.success(result.msg);
                        js.table.refresh(table);
                    } else {
                        js.modal.warning(result.msg);
                    }
                    js.modal.closeLoading();
                }
            });
        })
    }



    /**
     * 编辑信息
     */
    function editGroup(row){
        // alert(row.deptName)
        $("#typeForm-edit2").fillData(row);
        // $("#typeForm-edit2 [name='deptName']").val(row.deptName)
        js.modal.open("modal-edit-group");

    }

</script>